<template>
  <div v-loading="loading" class="outer">
    <div class="gl_fl dataOne" :style="{ backgroundImage: 'url(' + bgImg4 + ')', backgroundSize: '100% 100%', border: '1px solid #dcf8f8' }">
      <div class="title"><span>签到学员</span></div>
      <div class="number"><span class="num">{{ oneData.checkInStudentCount || 0 }}</span>人</div>
    </div>
    <div class="gl_fl dataOne" :style="{ backgroundImage: 'url(' + bgImg5 + ')', backgroundSize: '100% 100%', border: '1px solid #e9e3fd' }">
      <div class="title"><span>销课数</span></div>
      <div class="number"><span class="num">{{ oneData.usedClassPeriodAmount || 0 }}</span>课时</div>
    </div>
  </div>
</template>

<script>
import {
  api_GET_ClubWorkBenchOrganizationData // 查询机构运营数据
} from '@/extend/api/hall.js';
import { CopyData } from '@/lib';
import bgImg4 from '@/assets/images/mall/statistics_bg_4.png';
import bgImg5 from '@/assets/images/mall/statistics_bg_5.png';
export default {
  props: {
    activeTime: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      bgImg4: bgImg4,
      bgImg5: bgImg5,
      loading: false,
      form: {
        StartTime: null,
        EndTime: null
      },
      oneData: {
        checkInStudentCount: null,
        usedClassPeriodAmount: null
      }
    };
  },
  watch: {
    'activeTime': {
      immediate: true,
      handler(val) {
        const today = new Date();
        switch (val) {
          case 0:
            this.form = this.computeDateTime(0, today);
            break;
          case 1:
            this.form = this.computeDateTime(1, today);
            break;
          case 2:
            this.form = this.computeDateTime(2, today);
            break;
        }
        this.getData();
      }
    }
  },
  methods: {
    // 查询机构运营数据
    getData() {
      this.loading = true;
      api_GET_ClubWorkBenchOrganizationData(this.form).then(res => {
        this.loading = false;
        CopyData(res, this.oneData);
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取想要的时间数据
    getDateData (date) {
      const _year = date.getFullYear(); // 当前年
      const _month = date.getMonth() + 1; // 当前月
      const _date = date.getDate(); // 当前日
      const _day = date.getDay(); // 当前周几
      const _time = date.getTime(); // 当前时间戳
      const _strMonth = _month <= 9 ? '0' + _month : _month;
      const _strDate = _date <= 9 ? '0' + _date : _date;
      return {
        year: _year,
        month: _month,
        monthStr: _strMonth,
        date: _date,
        dateStr: _strDate,
        day: _day,
        time: _time
      };
    },
    computeDateTime(code, date) {
      const _dayTime = 86400000; // 一天的时间戳
      const _today = this.getDateData(date);
      if (code === 0) {
        // 今天
        return {
          StartTime: `${_today.year}-${_today.monthStr}-${_today.dateStr} 00:00:00`,
          EndTime: `${_today.year}-${_today.monthStr}-${_today.dateStr} 23:59:59`
        };
      } else if (code === 1) {
        // 本周
        const _weekStartDateTime = _today.time - ((_today.day - 1) * _dayTime);
        const _weekStartDate = new Date(_weekStartDateTime);
        const _weekStartDateFormat = this.getDateData(_weekStartDate);
        const _weekEndDateTime = _today.time + ((7 - _today.day) * _dayTime);
        const _weekEndDate = new Date(_weekEndDateTime);
        const _weekEndDateFormat = this.getDateData(_weekEndDate);
        return {
          StartTime: `${_weekStartDateFormat.year}-${_weekStartDateFormat.monthStr}-${_weekStartDateFormat.dateStr} 00:00:00`,
          EndTime: `${_weekEndDateFormat.year}-${_weekEndDateFormat.monthStr}-${_weekEndDateFormat.dateStr} 23:59:59`
        };
      } else if (code === 2) {
        // 本月
        const _monthStartDateTime = _today.time - ((_today.date - 1) * _dayTime);
        const _monthStartDate = new Date(_monthStartDateTime);
        const _monthStartDateFormat = this.getDateData(_monthStartDate);
        const _monthLastDay = new Date(_today.year, _today.month, 0); // 本月最后一天
        const _monthEndDateFormat = this.getDateData(_monthLastDay);
        return {
          StartTime: `${_monthStartDateFormat.year}-${_monthStartDateFormat.monthStr}-${_monthStartDateFormat.dateStr} 00:00:00`,
          EndTime: `${_monthEndDateFormat.year}-${_monthEndDateFormat.monthStr}-${_monthEndDateFormat.dateStr} 23:59:59`
        };
      } else {
        // 其他情况
        return {
          StartTime: null,
          EndTime: null
        };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.outer {
  display: flex;
  .dataOne {
    width: 270px;
    height: 150px;
    min-width: 220px;
    border: 1px solid #a0a0a0;
    border-radius: 2px;
    padding: 20px 25px 10px;
    margin-right: 30px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09);
    .title {
      color: #979797;
      font-size: 14px;
      line-height: 25px;
    }
    .number {
      height: 45px;
      font-weight: 500;
      .num {
        font-size: 20px;
        line-height:45px;
        margin-right: 15px;
        font-family: Helvetica Neue, Helvetica Neue-Regular;
      }
    }
  }
}
</style>
